<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <title>工具网站</title>
      <style>
            .container {
                  display: -webkit-flex;
                  display: flex;
                  flex-direction: row;
                  justify-content: flex-start;
                  flex-wrap: wrap;
                  -webkit-flex-wrap: wrap;
                  align-content: flex-start;
            }

            .card {
                  width: 150px;
                  height: 100px;
                  border-radius: 10px;
                  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                  text-align: center;
                  margin: 30px 20px;
                  border: 1px solid #ccc;
            }

            .card:hover {
                  border: 1px solid aqua;
            }

            img {
                  width: 100%;
                  height: 100%;
                  border-radius: 10px;
            }

            .desc {
                  font-size: 20px;
            }

            @media screen and (max-width:768px) {
                  .card {
                        width: 60px;
                        height: 50px;
                  }

                  .desc {
                        font-size: 15px;
                  }
            }
      </style>
</head>

<body>
      <div class="container">
            <div class="card">
                  <a target="_blank" href="https://sites.baidu.com/">
                        <img src="imgs/baidu.png" alt="百度新闻">
                  </a>
                  <div class="desc">百度新闻</div>
            </div>

      </div>
</body>
<script>
      var websites = {
            "sites": [
                  {
                        "name":"爱资料工具",
                        "imgUrl":"https://www.toolnb.com/Public/logo.png",
                        "url":"https://www.toolnb.com/toolslist/14.html"
                  },
                  {
                        "name":"菜鸟工具",
                        "imgUrl":"https://static.jyshare.com/images/c-runoob-logo.ico",
                        "url":"https://www.jyshare.com/"
                  },
                  {
                        "name":"金山词霸",
                        "imgUrl":"https://cdn.iciba.com/www/img/www/logo.png",
                        "url":"https://www.iciba.com/"
                  },
                  {
                        "name": "百度脑图",
                        "imgUrl": "https://naotu.baidu.com/favicon.ico",
                        "url": "https://naotu.baidu.com/"
                  },
                  {
                        "name": "幕布",
                        "imgUrl": "https://mubu.com/favicon.ico",
                        "url": "https://mubu.com/"
                  },
                  {
                        "name": "石墨文档",
                        "imgUrl": "https://shimo.im/favicon.ico",
                        "url": "https://shimo.im/"
                  },
                  {
                        "name": "腾讯文档",
                        "imgUrl": "https://docs.qq.com/favicon.ico",
                        "url": "https://docs.qq.com/"
                  },
                  {
                        "name": "金山文档",
                        "imgUrl": "https://www.kdocs.cn/favicon.ico",
                        "url": "https://www.kdocs.cn/"
                  },
                  // {
                  //       "name": "GitLab",
                  //       "imgUrl": "https://about.gitlab.com/favicon.ico",
                  //       "url": "https://about.gitlab.com/"
                  // },
                  {
                        "name": "码云Gitee",
                        "imgUrl": "https://gitee.com/favicon.ico",
                        "url": "https://gitee.com/"
                  },
                  {
                        "name": "JSON格式化",
                        "imgUrl": "https://www.json.cn/favicon.ico",
                        "url": "https://www.json.cn/"
                  },
                  {
                        "name": "在线PS",
                        "imgUrl": "https://www.photopea.com/favicon.ico",
                        "url": "https://www.photopea.com/"
                  },
                  // {
                  //       "name": "Carbon",
                  //       "imgUrl": "https://carbon.now.sh/favicon.ico",
                  //       "url": "https://carbon.now.sh/"
                  // },
                  {
                        "name": "Regex101",
                        "imgUrl": "https://regex101.com/favicon.ico",
                        "url": "https://regex101.com/"
                  },
                  // {
                  //       "name": "Postman",
                  //       "imgUrl": "https://www.postman.com/favicon.ico",
                  //       "url": "https://www.postman.com/"
                  // },
                  {
                        "name": "Canva可画",
                        "imgUrl": "https://www.canva.cn/favicon.ico",
                        "url": "https://www.canva.cn/"
                  },
                  {
                        "name": "ProcessOn",
                        "imgUrl": "https://www.processon.com/favicon.ico",
                        "url": "https://www.processon.com/"
                  },
                  // {
                  //       "name": "SmallPDF",
                  //       "imgUrl": "https://smallpdf.com/favicon.ico",
                  //       "url": "https://smallpdf.com/"
                  // },
                  {
                        "name": "TinyPNG",
                        "imgUrl": "https://tinypng.com/images/favicon.ico",
                        "url": "https://tinypng.com/"
                  },
                  // {
                  //       "name": "Remove.bg",
                  //       "imgUrl": "https://www.remove.bg/favicon.ico",
                  //       "url": "https://www.remove.bg/"
                  // },
                  {
                        "name": "Notion",
                        "imgUrl": "https://www.notion.so/favicon.ico",
                        "url": "https://www.notion.so/"
                  },
                  // {
                  //       "name": "Evernote",
                  //       "imgUrl": "https://www.evernote.com/favicon.ico",
                  //       "url": "https://www.evernote.com/"
                  // },
                  {
                        "name": "GitHub",
                        "imgUrl": "https://github.com/favicon.ico",
                        "url": "https://github.com/"
                  },
            ]
      }
      $().ready(function () {
            $('.container').empty();
            console.log(websites['sites'])
            var sites = websites['sites'];
            //为.container动态添加新闻卡片
            for (var i = 0; i < sites.length; i++) {
                  console.log("进入循环")
                  var sites_card = $('<div class="card">' +
                        '<a target="_blank" href="' + sites[i].url + '">' +
                        '<img src="' + sites[i].imgUrl + '">' +
                        '</a>' +
                        '<div class="desc">' + sites[i].name + '</div>' +
                        '</div>');
                  console.log(sites_card)
                  $('.container').append(sites_card);
            }

      });

      document.oncontextmenu = new Function("event.returnValue=false");
      document.onselectstart = new Function("event.returnValue=false");
      document.oncontextmenu = function (e) { return false; }
      document.onkeydown = function (e) {
            if (window.event && window.event.keyCode == 123) {
                  event.keyCode = 0;
                  event.returnValue = false;
                  return false;
            }
      }
</script>

</html>